<template>
    <div class="vip">
        <div class="bindForm">
            <div v-if="mode == 1">
                <el-input placeholder="填写手机号码" v-model="form.phone"></el-input>
                <div v-if="showPhoneCode" style="margin-bottom: 12px;">
                    <el-input
                        type="password"
                        style="margin-top: 12px; margin-bottom: 12px;"
                        placeholder="填写密码"
                        v-model="form.pwd"
                    ></el-input>
                </div>
                <div>
                    <el-button type="text" @click="changeMode">忘记密码</el-button>
                </div>
                <el-button type="primary" style="width: 100%; margin-top:30px;" @click="onLogin">登录</el-button>
                <!-- <el-button type="primary" style="width: 100%; margin-top:30px;" @click="fakeLogin">模拟登录</el-button> -->
            </div>
            <div v-if="mode == 2">
                <el-input placeholder="填写手机号码" v-model="form.phone"></el-input>
                <el-input
                    style="margin-top: 12px;"
                    type="password"
                    placeholder="填写密码"
                    v-model="form.pwd"
                ></el-input>
                <div
                    class="flex justify-content-start align-items-center"
                    style="margin-top: 12px; "
                >
                    <div style="flex:1">
                        <el-input v-model="form.code" placeholder="填写验证码" width="180"></el-input>
                    </div>
                    <div style="flex:none;margin-left: 12px;">
                        <el-button type="primary" @click="getPhoneVerifyCode" :disabled="codeText != '获取验证码'">{{codeText}}</el-button>
                    </div>
                </div>
                <el-button type="primary" style="width: 100%;margin-top:30px;" @click="onFinish">完成</el-button>
            </div>
            <div class="hint" >
                登录即表示同意
                <a href="/protocol" target="_blank">《用户协议》</a>和
                <a href="/privacy" target="_blank">《隐私政策》</a>
            </div>
        </div>
    </div>
</template>

<script>
import { mapGetters } from "vuex";
import {
    phoneLogin,
    verifyPhone,
    returnPwd,
    sendSms
} from "@/api/login";
import { Message } from "element-ui";

var countDownForm = 600;

export default {
    components: {},
    props: ["mode"],
    computed: {
        ...mapGetters(["openid", "sid"])
    },
    data() {
        return {
            showPhoneCode: true,
            form: {
                phone: "",
                pwd: "",
                code: ""
            },
            codeCount:60,
            codeText:'获取验证码',
            loginBtnDisable: false,
            codeInterval:null,
        };
    },
    created() {
        if (this.openid) {
            // this.url = 'http://baogao.applinzi.com/api/pay/WxMiniQrCode?openid=' + this.openid + "&id=" + this.idx
            // // console.log('url:'+this.url)
        }
    },
    methods: {
        // 获取验证码
        getPhoneVerifyCode() {
            if(this.codeText != '获取验证码'){
                return;
            }
            // 发送请求
            this.codeInterval = setInterval( () => {
                this.codeText = this.codeCount--;
                if(this.codeText == 0){
                    clearInterval(this.codeInterval);
                    this.codeInterval = null;
                    this.codeText = '获取验证码';
                    this.codeCount = 60;
                }
            },1000)
            sendSms(this.form.phone).then(res => {
                this.$message.info("验证码已发送, 有效时间5分钟");
            });
        },
        // 验证手机号是否存在
        verifyPhoneNo() {
            // 发送验证手机号
            // this.$message.info('手机号可用, 请继续注册');
            verifyPhone(this.form.phone)
                .then(response => {
                    this.showPhoneCode = true;
                    this.loginBtnDisable = false;
                })
                .catch(err => {
                    this.showPhoneCode = false;
                    this.loginBtnDisable = true;
                });
        },
        // 完成
        onFinish() {
           // 找回密码
            returnPwd(this.form.phone, this.form.pwd, this.form.code).then(
                res => {
                    this.$message.success("重置密码成功");
                    this.$emit('changeMode',1);
                }
            ).catch(err => {
                
            });
        },
        fakeLogin(){
            let token = 'eyJzX2lkIjoiMjJmOWUwNWUyNmMyNjgyZWQwNGI4ODYyOWEwMGU0MTEiLCJvc29fdG9rZW4iOiJjNjc2MzdlOGY1N2JhMDZmYjI1MGVkMjVmNzM5MmNmMzNkIn0'
            let openid = 'os91n6MnFoQEymvKgljJFDJLQw6E'
            this.$message.success("登录成功");
            // 处理  res.infor.sid
            this.$store.dispatch("Login", {
                token: token,
                sid: token,
                openid: openid
            });
            this.$emit("loginsucc", 1);
        },
        // 绑定
        onLogin() {
            // 执行登录操作
            phoneLogin(this.form.phone, this.form.pwd).then(res => {
                // console.log('手机号登录', res)
                // return
                this.$message.success("登录成功");
                // 处理  res.infor.sid
                this.$store.dispatch("Login", {
                    token: res.infor.authToken,
                    sid: res.infor.authToken,
                    openid: res.infor.openid
                });
                this.$emit("loginsucc", 1);
            }).catch(err => {
                console.log(err)
                Message({
                    message: err,
                    type: "warning",
                    duration: 3 * 1000,
                });
            }) 
        },
        changeMode() {
            this.$emit('changeMode',2);
        }
    }
};
</script>

<style lang="less" scoped>
.vip {
    .bindForm {
        height: 100%;
        background: rgba(255, 255, 255, 1);
        // box-shadow: 0px 4px 8px 0px rgba(63, 71, 80, 0.1);
        // border-radius: 4px;
        // opacity: 0.9;
        box-sizing: border-box;
        padding: 40px 24px 0px 24px;
    }
}

.hint {
    width: 100%;
    text-align: center;
  font-size: 12px;
  margin-top: 20px;
}

.hint a {
  cursor: pointer;
  color: #4b91ea;
  text-decoration: none;
}
</style>
